<template>
    <div class="post-list">
        <article v-for="post in posts" :key="post._id" class="card mb-3 shadow-lg">
            <div class="card-body">
                <h4><router-link :to="`/posts/${post._id}`">{{ post.title }}</router-link></h4>
                <div class="row my-3 align-items-center">
                    <div v-if="post.image && (typeof post.image !== 'string')" class="col-3">
                        <img :src="post.image.fitUrl" :alt="post.title" class=" rounded-0 w-100">
                    </div>
                    <p :class="{ 'col-9': post.image }">{{ post.excerpt }}</p>
                </div>
                <span class="text-muted">{{ post.createdAt }}</span>
            </div>
        </article>
    </div>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue';
import { ImageProps, PostProps } from '@/types/index';
import { generateFitUrl } from '@/utils/FileUtils';

const props = defineProps({
    list: {
        type: Array as PropType<PostProps[]>,
        required: true
    }
})

const posts = computed(() => {
    return props.list.map(post => {
        generateFitUrl(post.image as ImageProps, 200, 110, ['m_fill'])
        return post
    })
})
</script>

<style scoped>
.post-list h4 a {
    text-decoration: none;
    color: #1a1a1a;
}

.post-list h4 a:hover {
    color: #0d6efd;
}
</style>